<template>
  <div>
    <el-button @click="showAdd">添加操作人员</el-button>
  </div>
  <el-table :data="operList" style="width: 100%">
    <el-table-column prop="adminid" label="编号" width="350" />
    <el-table-column prop="adminname" label="账户名" width="150" />
    <el-table-column label="角色" width="120">
      <template #default="scope">
        <div>{{getRoleName(scope.row.role)}}</div>
      </template>
    </el-table-column>

    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="showEdit(scope.row.adminname)"
        >
          编辑</el-button
        >
        <el-button
          link
          type="primary"
          size="small"
          @click="removeOper(scope.row.adminid)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 添加的弹出窗口 -->
  <el-dialog v-model="isShowAdd" title="添加操作人员" width="500">
    <AddOper @closeWin="closeAddFn"></AddOper>
  </el-dialog>
  <!-- 修改的弹出窗口 -->
  <el-dialog v-model="isShowEdit" title="修改操作人员" width="500">
    <EditOper :adminname="adminnameEdit"   @closeWin="closeEditFn"></EditOper>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive,ref } from "vue";
import {ElMessageBox,ElMessage} from "element-plus";
import {getOperListApi,removeOperApi} from "@/api/admins";
import AddOper from "./AddOper.vue";
import EditOper from "./EditOper.vue";
import type {IOper} from "./myTypes"

const operList = reactive<Array<IOper>>([
  {
    _id: "65e2978016a59014e9859346",
    adminname: "asdf",
    password: "e10adc3949ba59abbe56e057f20f883e",
    role: 1,
    adminid: "admin_50d4ccd9-fb43-4f9e-afd2-9f70d92a9fb2",
    checkedKeys: [
      "用户管理",
      "用户列表",
      "用户详情",
      "产品列表",
      "秒杀列表",
      "视图管理",
      "数据统计图",
      "地图管理",
      "地图",
      "产品管理",
    ],
  },
]);

// 把角色编号转成角色名：
const getRoleName=(role:number)=>{
    const roleObj = {
        1:"超级管理员",
        2:"轮播图维护人员",
        3:"商品维护人员",
        4:"售后人员"
    }
    return roleObj[role];
}

// 获取操作人员列表
const getOperList=()=>{
    getOperListApi()
    .then(res=>{
        if(res.data.code==="200"){
            operList.length=0;
            operList.push(...res.data.data);
        }
    })
}

getOperList();


// 删除操作人员:
const removeOper=(adminid:string)=>{
    ElMessageBox.confirm(
    '亲，您真的要删除吗?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        removeOperApi(adminid)
        .then(res=>{
            if(res.data.code==="200"){
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                // 重新获取数据
                getOperList();
            }else{
                ElMessage({
                    type: 'info',
                    message: '删除失败！',
                })
            }
        })
    })
}

// 控制添加操作人员窗口的显示和隐藏：
const isShowAdd = ref(false);

const showAdd=()=>{
  isShowAdd.value = true;
}

// 关闭“添加窗口”
const closeAddFn=(isRefresh:boolean)=>{
  isShowAdd.value = false;
  isRefresh && getOperList();
}


// 编辑（修改）
const isShowEdit = ref(false);
const adminnameEdit = ref("");

const showEdit=(adminname:string)=>{
  adminnameEdit.value = adminname;
  isShowEdit.value = true;
}

const closeEditFn=(isRefresh:boolean)=>{
  isShowEdit.value = false;
  isRefresh && getOperList();
}


</script>

<style lang="scss" scoped></style>
